<template>
	<view class="list-wrap">
		<view class="list-wrap">
			<scroll-view scroll-x class="bg-white nav cu-bar" v-if="listType === 'proc'">
				<view class="flex text-center ">
					<view class="cu-item flex-sub" :class="index == TabCur ? 'text-orange cur' : ''"
						v-for="(item, index) in tabList" :key="index" @tap="tabSelect($event, item, index)"
						:data-id="index">
						{{ item.label }}
						<text class="text-red"
							style="margin-left: 10upx; padding:0 10upx;border-radius: 10upx;">{{ item.total }}</text>
					</view>
				</view>
			</scroll-view>
			<sPullScroll ref="pullScroll" :heightStyle="heightStyle" :pullDown="pullDown" :pullUp="loadData"
				:enablePullDown="enablePullDown" :enablePullUp="enablePullUp" :top="top" :fixed="fixed" :bottom="bottom"
				finishText="我是有底线的...">
				<view :class="{ 'grid-layout': onlyShowTitle }" v-if="listType === 'list'">
					<list-item :detailList="detailList" v-for="item in listData" :key="item[rowKey]" :itemData="item"
						:labels="ShowLabelColumn" :viewTemp="finalViewTemp" :viewType="viewType" :imageNum="imageNum"
						:gridRowNum="gridRowNum" :rowButton="rowButton" :srv_cols="srv_cols" :listType="listType"
						:pageType="pageType" :showFootBtn="showFootBtn" :layout="onlyShowTitle ? 'grid' : 'normal'"
						@click-list-item="clickItem" @click-foot-btn="clickFootBtn"></list-item>
				</view>
				<view v-if="listType === 'proc'">
					<list-item :detailList="detailList" v-for="(item, index) in tabList[TabCur]['data']" :key="index"
						:labels="ShowLabelColumn" :itemData="item" :viewTemp="finalViewTemp" :viewType="viewType"
						:imageNum="imageNum" :gridRowNum="gridRowNum" :rowButton="rowButton" :srv_cols="srv_cols"
						:pageType="pageType" :listType="listType" :showFootBtn="showFootBtn"
						@click-list-item="clickItem" @click-foot-btn="clickFootBtn"></list-item>
				</view>
			</sPullScroll>
		</view>
		<view class="pagination">
			<text class="page-no">{{ pageInfo.pageNo }}</text>
			<text class="total">{{ pageInfo.total }}</text>
		</view>
	</view>
</template>

<script>
	import listItem from './bx-list-item.vue';
	import sPullScroll from '@/components/s-pull-scroll';
	export default {
		name: 'List',
		components: {
			listItem,
			sPullScroll
		},
		data() {
			return {
				index: -1,
				TabCur: 0,
				listData: [],
				noData: false,
				pageInfo: {
					total: 0,
					rownumber: this.rownumber,
					pageNo: 1
				},
				srv_cols: [],
				rowButton: [],
				searchCol: '',
				tabList: [{
						label: '待我处理',
						proc_data_type: 'wait',
						data: [],
						total: 0,
						page: {
							total: 0,
							rownumber: 5,
							pageNo: 1
						}
					},
					{
						label: '我的全部',
						proc_data_type: 'myall',
						data: [],
						total: 0,
						page: {
							total: 0,
							rownumber: 5,
							pageNo: 1
						}
					},
					{
						label: '我的申请',
						proc_data_type: 'mine',
						data: [],
						total: 0,
						page: {
							total: 0,
							rownumber: 5,
							pageNo: 1
						}
					},
					{
						label: '我已处理',
						proc_data_type: 'processed',
						data: [],
						total: 0,
						page: {
							total: 0,
							rownumber: 5,
							pageNo: 1
						}
					}
				],
				proc_data_type: 'wait'
			};
		},
		computed: {
			moreConfig() {
				if (this.listConfig && this.listConfig.moreConfig) {
					return this.listConfig.moreConfig
				}
			},
			configViewTemp() {
				// more_config中配置的字段显示关系
				if (this.moreConfig && this.moreConfig.viewTemp) {
					return this.moreConfig.viewTemp
				}
			},
			ShowLabelColumn() {
				// 要显示标签的字段
				if (this.moreConfig && this.moreConfig.ShowLabelColumn) {
					return this.moreConfig.ShowLabelColumn
				} else if (this.moreConfig && this.moreConfig.labels) {
					return this.moreConfig.labels
				} else if (Array.isArray(this.labels)) {
					return this.labels
				}
			},
			finalViewTemp() {
				// 最终使用的 字段显示关系
				if (!this.customTemp && this.configViewTemp && typeof this.configViewTemp === 'object' && Object.keys(this
						.configViewTemp)
					.length > 0) {
					return this.configViewTemp
				} else {
					return this.viewTemp
				}
			},
			finalSearchColumn() {
				if (this.moreConfig && this.moreConfig.searchColumn) {
					return this.moreConfig.searchColumn
				} else {
					return this.searchCol
				}
			},
			onlyShowTitle() {
				if (this.finalViewTemp) {
					if (!this.finalViewTemp.tip && !this.finalViewTemp.img && !this.finalViewTemp.price && !this
						.finalViewTemp.footer && this
						.finalViewTemp.title) {
						return true;
					} else {
						if (!this.finalViewTemp.tip && this.finalViewTemp.img && !this.finalViewTemp.price && !this
							.finalViewTemp.footer &&
							this.finalViewTemp.title) {
							return true
						}
						return false;
					}
				} else {
					return false;
				}
			}
		},
		watch: {
			pageInfo: {
				deep: true,
				handler(newValue) {
					console.log('Page:', newValue.total <= newValue.rownumber * newValue.pageNo);
					if (newValue.total <= newValue.rownumber * newValue.pageNo) {
						this.noData = true;
						this.$emit('loadEnd', newValue);
					} else {
						this.noData = false;
					}
				}
			},
			listConfig: {
				deep: true,
				immediate: true,
				handler(newValue) {
					if (newValue && newValue.hasOwnProperty('srv_cols')) {
						this.srv_cols = newValue.srv_cols;
						let rowButton = newValue.rowButton;
						if (rowButton) {
							if (this.pageType !== 'proc') {
								//普通列表显示行按钮
								//流程列表点击跳转到流程详情
								// ['duplicate','customize', 'edit', 'delete', 'procdetail', 'deleteproc']
								rowButton = rowButton.filter(
									item => ['duplicate', 'customize', 'edit', 'delete', 'procdetail'].includes(item
										.button_type)
								);
							}
							this.rowButton = rowButton;
						}
					}
				}
			},
			searchColumn: {
				immediate: true,
				handler(newValue) {
					if (newValue) {
						this.searchCol = newValue;
					} else if (this.viewTemp && this.viewTemp.title) {
						this.searchCol = this.viewTemp.title;
					}
				}
			}
		},

		props: {
			// 是否允许下拉刷新
			enablePullDown: {
				type: Boolean,
				default: true
			},
			// 是否允许上拉加载
			enablePullUp: {
				type: Boolean,
				default: true
			},
			//是否是详情列表
			detailList: {
				type: Boolean,
				default: false
			},
			// height
			heightStyle: {
				type: String,
				default: ''
			},
			// class
			customClass: {
				type: String,
				default: ''
			},
			// 距顶部(rpx)
			top: {
				type: [Number, Array, String],
				default () {
					return 0;
				}
			},
			// 距底部(rpx)
			bottom: {
				type: [Number, Array, String],
				default () {
					return 0;
				}
			},

			// 是否通过fixed固定高度, 默认true
			fixed: {
				type: Boolean,
				default: true
			},
			listConfig: {
				type: Object,
				default: () => {}
			},
			viewType: {
				type: String,
				default: 'normal'
			},
			viewTemp: {
				type: Object,
				default: () => {}
			},
			imageNum: {
				type: Number,
				default: 1
			},
			gridRowNum: {
				type: Number,
				default: 2
			},
			rowKey: {
				type: String,
				default: 'id'
			},
			serviceName: {
				type: String,
				default: ''
			},
			srvApp: {
				type: String,
				default: ''
			},
			condition: {
				type: Array,
				default: () => {
					[];
				}
			},
			rownumber: {
				type: Number,
				default: 10
			},
			order: {
				type: Array,
				default: () => {
					[];
				}
			},
			searchWords: {
				//搜索关键词
				type: String,
				default: ''
			},
			searchColumn: {
				//搜索字段
				type: [String, Array],
				default: ''
			},
			rowButtons: {
				type: Array,
				default: () => {
					[];
				}
			},
			listType: {
				type: String, //list||proc
				default: 'list'
			},
			pageType: {
				type: String, //list||proc
				default: 'list'
			},
			showFootBtn: {
				type: Boolean, //是否显示底部按钮
				default: true
			},
			labels: { //要显示label的字段
				type: Array
			},
			customTemp: {
				type: Boolean, // 强制使用本地代码中自定义的viewTemp
				default: false
			}
		},
		methods: {
			tabSelect(e, item, index) {
				console.log(e);
				this.TabCur = e.currentTarget.dataset.id;
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60;
				this.proc_data_type = item.proc_data_type;
				this.tabList[this.TabCur]['data'] = [];
				this.pageInfo = {
					total: 0,
					rownumber: 5,
					pageNo: 1
				};
				// this.tabList[this.TabCur]['page'] = { total: 0, rownumber: 5, pageNo: 1 };
				this.listData = [];
				this.onRefresh();
			},
			toSearch() {
				let keywords = this.searchWords;
				this.pageInfo.pageNo = 1;
				this.onRefresh();
			},
			trigger(e) {
				console.log('trigger', e);
				this.$emit('trigger', e);
			},
			fabClick(e) {
				console.log('fabClick', e);
				this.$emit('fab-click', e);
			},
			clickItem(data) {
				this.$emit('click-list-item', data);
			},
			clickFootBtn(data) {
				this.$emit('clickFootBtn', data);
			},
			async getListData(cond, proc_data_type, i) {
				let serviceName = this.serviceName;
				let app = uni.getStorageSync('activeApp');
				let url = this.getServiceUrl(this.srvApp || app, serviceName, 'select');
				let req = {
					serviceName: serviceName,
					colNames: ['*'],
					condition: this.condition,
					page: {
						rownumber: this.pageInfo.rownumber,
						pageNo: this.pageInfo.pageNo
					},
					order: this.order
				};
				if (this.listType === 'proc') {
					if (proc_data_type || this.proc_data_type) {
						req['proc_data_type'] = proc_data_type || this.proc_data_type;
					} else {
						req['proc_data_type'] = 'wait';
					}
				}
				if (cond && cond.length > 0) {
					req.condition = req.condition.concat(cond);
				}
				let keywords = this.searchWords;
				if (keywords && this.finalSearchColumn) {
					if (typeof this.finalSearchColumn === 'string') {
						req.condition = req.condition.concat([{
							colName: this.finalSearchColumn,
							ruleType: 'like',
							value: keywords
						}]);
					} else if (Array.isArray(this.finalSearchColumn)) {
						// 数组 使用relation_condition
						if (Array.isArray(req.condition) && req.condition.length > 0) {
							req.relation_condition = {
								relation: "AND",
								data: [{
										relation: "OR",
										data: this.finalSearchColumn.map(itme => {
											return {
												"colName": itme,
												"value": keywords,
												"ruleType": 'like'
											}
										})
									},
									{
										relation: "AND",
										data: this.deepClone(req.condition)
									}
								]
							}
						} else {
							req.relation_condition = {
								relation: "OR",
								data: this.finalSearchColumn.map(itme => {
									return {
										"colName": itme,
										"value": keywords,
										"ruleType": 'like'
									}
								})
							}
						}
						delete req.condition
					}
				}
				let res = await this.$http.post(url, req);
				if (res.data.state === 'SUCCESS') {
					if (this.pageInfo.pageNo === 1) {
						this.listData = [];
					}
					this.listData = this.listData.concat(res.data.data);
					this.pageInfo.total = res.data.page.total;
					this.pageInfo.pageNo = res.data.page.pageNo;
					this.$emit('list-change', this.listData);
					if (this.listType === 'proc') {
						for (let i = 0; i < this.tabList.length; i++) {
							let item = this.tabList[i];
							if (item.proc_data_type === req.proc_data_type) {
								item.data = this.listData;
								item.total = res.data.page.total;
								item.page = res.data.page;
								this.$set(this.tabList, i, item);
							}
						}
						this.listData = [];
						this.listData = this.tabList[this.TabCur]['data'];
						let callBackData = {
							data: this.listData,
							page: res.data.page,
							proc_data_type: req.proc_data_type
						};
						let page = this.pageInfo;
						return callBackData;
					} else if (this.listType === 'list') {
						let page = this.pageInfo;
						if (page.rownumber * page.pageNo >= page.total) {
							// finish(boolean:是否显示finishText,默认显示)
							this.$refs.pullScroll.finish();
						} else {
							this.$refs.pullScroll.success();
						}
					}
					return this.listData;
				}
			},
			onRefresh() {
				this.pageInfo.pageNo = 1;
				// this.getListData();
				this.$nextTick(() => {
					this.$refs.pullScroll.refresh();
				});
			},
			pullDown(pullScroll) {
				console.log(pullScroll.page);
				let page = this.pageInfo;
				this.pageInfo.pageNo = 1;
				setTimeout(() => {
					this.getListData().then(callBackData => {
						if (this.listType === 'proc') {
							if (callBackData.page.rownumber * callBackData.page.pageNo >= callBackData.page
								.total) {
								// finish(boolean:是否显示finishText,默认显示)
								this.$refs.pullScroll.finish();
							} else {
								this.$refs.pullScroll.success();
							}
						}
					});
					// this.loadData(pullScroll);
				}, 200);
			},
			loadData(pullScroll) {
				let page = this.pageInfo;
				this.pageInfo.pageNo = pullScroll.page;
				if (this.listType === 'proc') {
					this.tabList[this.TabCur].page.pageNo = pullScroll.page;
				}
				console.log(pullScroll.page);
				this.getListData().then(res => {
					if (this.listType === 'proc') {
						if (res.page.rownumber * res.page.pageNo >= res.page.total) {
							// finish(boolean:是否显示finishText,默认显示)
							this.$refs.pullScroll.finish();
						} else {
							this.$refs.pullScroll.success();
						}
					}
				});
			}
		},
		onReachBottom() {
			console.log('监听');
		},
		mounted() {
			if (this.serviceName && this.listType === 'list') {
				this.onRefresh();
			} else if (this.serviceName && this.listType === 'proc') {
				this.tabList.forEach(item => {
					this.getListData([], item.proc_data_type).then(data => {
						console.log('PageInfo', data);
						if (data.proc_data_type === 'wait') {
							let pageInfo = data.page;
							if (pageInfo.rownumber * pageInfo.pageNo >= pageInfo.total) {
								// finish(boolean:是否显示finishText,默认显示)
								this.$refs.pullScroll.finish();
								// this.$refs.pullScroll.success();
							} else {
								// this.$refs.pullScroll.success();
							}
						} else {
							// this.$refs.pullScroll.finish();
						}
					});
					this.onRefresh();
				});
			}
		}
	};
</script>

<style lang="scss">
	.list-wrap {
		width: 100%;
		max-width: 1000upx;
		margin: 0 auto;
		display: flex;
		flex-direction: column;

		.grid-layout {
			padding: 20rpx 10rpx;
			display: grid;
			grid-template-columns: repeat(6, calc((100% / 6) - 10rpx));
			grid-row-gap: 10rpx;
			grid-column-gap: 10rpx;
		}
	}

	.pagination {
		position: fixed;
		bottom: 120rpx;
		right: 40upx;
		width: 80upx;
		height: 80upx;
		border-radius: 50%;
		border: 1px solid rgba($color: #999, $alpha: 0.5);
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-items: center;
		z-index: 100;

		&::after {
			content: '';
			position: absolute;
			background-color: rgba($color: #999, $alpha: 0.5);
			width: 80%;
			height: 2upx;
			top: 50%;
		}

		.page-no {
			font-size: 28upx;
		}

		.total {
			font-size: 20upx;
			color: #666;
			transform: scale(0.8, 0.8);
		}
	}

	.nav .cu-item {
		padding: 0;
	}

	.animation-slide-top {
		animation-name: slide-top;
	}

	@keyframes slide-top {
		0% {
			opacity: 0;
			height: 0;
			transform: translateY(-100%);
		}

		100% {
			opacity: 1;
			height: auto;
			transform: translateY(0);
		}
	}
</style>
